<template>
	<view class="con">
		<view class="bank" v-if="type==2" @click="show1=true">
			<view class="zzz">
				<u-icon name="zhifubao-circle-fill" color="#2979ff" size="80"></u-icon>
				<text>支付宝</text>
			</view>
			<u-icon name="arrow-right" color="#999" size="28"></u-icon>
		</view>
		<view class="bank" v-if="type==1" @click="show1=true">
			<view class="zzz">
				<u-icon name="weixin-fill" color="#07C160" size="80"></u-icon>
				<text>微信</text>
			</view>
			<u-icon name="arrow-right" color="#999" size="28"></u-icon>
		</view>
		<view class="kk">可提现至微信或支付宝</view>
		<view class="b_box">
			<view class="title">提现金额最少为100（收取5%手续费）</view>
			<view class="input-box">
				<input type="text" v-model="paymentName"  placeholder="输入账户名称" placeholder-style="color:#999999;font-size: 26rpx" />
			</view>
			<view class="input-box" v-if="type==2">
				<input type="text" v-model="paymentAccount"  placeholder="输入支付宝账号" placeholder-style="color:#999999;font-size: 26rpx" />
			</view>
			<view class="input-box" v-if="type==1" >
				<input type="text" v-model="paymentAccount" placeholder="输入微信账号" placeholder-style="color:#999999;font-size: 26rpx" />
			</view>
			<view class="input-box">
				<input type="number" v-model="money" placeholder="输入提现金额" placeholder-style="color:#999999;font-size: 26rpx" @input="inputmoney" />
			</view>
			<view class="yv">
				<view>可用余额{{ye}}元</view>
				<view class="all" @click="money=ye">全部提现</view>
			</view>
			<view class="btn" @click="showFn">
				确认提现
			</view>
		</view>
		<u-mask :show="show" @click="show = false" v-if="show==true">
			<view class="warp">
				<view class="rect" @tap.stop>
					<view class="pad">请输入密码</view>
					<view class="je">提现金额{{money}}元</view>
					<u-message-input mode="box" :maxlength="6" :dot-fill="true" @change="change" @finish="finish" :focus="true">
					</u-message-input>
					<view class="zwbtn" v-if="checkedpay==true" @click="zwpay">使用指纹支付</view>
				</view>
			</view>
		</u-mask>
		<u-select v-model="show1" :list="list" @confirm="changetype"></u-select>
	</view>
</template>

<script>
	import {tixian}from"../../../api/user.js"
	import {
		paypassword
	} from "../../../api/product.js"
	export default {
		data() {
			return {
				show:false,
				show1:false,
				type:1,
				list: [{
						value: '1',
						label: '微信'
					},
					{
						value: '2',
						label: '支付宝'
					}
				],
				paymentName:"",
				money:"",
				ye:"",
				paymentAccount:"",
				checkedpay:false
			}
		},
		onLoad() {
			if(uni.getStorageSync("user").userType==null){
				this.msg("暂未认证，不可提现","none")
				setTimeout(()=>{
					uni.navigateBack({
						delta:1
					})
				},1500)
			}
			this.ye=uni.getStorageSync("user").balance.toString()
		},
		onShow() {
			if (uni.getStorageSync("openpay") && uni.getStorageSync("openpay") == true) {
				this.checkedpay = true
			}
		},
		methods: {
			change(e) {
				console.log('内容改变，当前值为：' + e);
			},
			zwpay(){
				this.show = false
				// 开始指纹识别
				uni.startSoterAuthentication({
					requestAuthModes: ['fingerPrint'],
					challenge: '123456',
					authContent: '请验证本机指纹',
					success: (res) => {
						console.log('成功', res);
						if (res.errCode == 0) {
							this.tixian()
						}
					},
					fail: (res) => {
						console.log('失败', res);
						if (res.errCode == 90001) {
							this.msg('本设备不支持生物认证', 'none')
						}
						if (res.errCode == 90002) {
							this.msg('用户未授权使用该生物认证接口', 'none')
						}
						if (res.errCode == 90003) {
							this.msg('请求使用的生物认证方式不支持', 'none')
						}
						if (res.errCode == 90007) {
							this.msg('内部错误', 'none')
						}
						if (res.errCode == 90008) {
							this.msg('用户取消授权', 'none')
						}
						if (res.errCode == 90009) {
							this.msg('识别失败', 'none')
						}
						if (res.errCode == 90010) {
							this.msg('重试次数过多被冻结', 'none')
						}
						if (res.errCode == 90011) {
							this.msg('用户未录入所选识别方式', 'none')
						}
					},
					complete(res) {
						console.log('结束', res);
					}
				})
			},
			async finish(e) {
				console.log('输入结束，当前值为：' + e);
				this.show=false
				this.tixian()
			},
			async tixian(){
				let res=await this.post(tixian,{
					money:this.money,
					paymentName:this.paymentName,
					paymentAccount:this.paymentAccount,
					withdrawalMethod:this.type
				})
				console.log(res)
				this.msg("提现成功，等待后台审核","none")
				setTimeout(()=>{
					uni.switchTab({
						url:"/pages/user/user"
					})
				},1500)
			},
			changetype(e){
				this.type=e[0].value
			},
			showFn(){
				if(this.paymentAccount.toString().trim()==""||this.paymentName.trim()==""){
					this.msg("提现账户信息未完善","none")
					return
				}
				if(this.money.toString().trim()!=""&&this.money>=100){
					if(this.money>this.ye){
						this.msg("金额不得大于余额","none")
					}else{
						if(uni.getStorageSync("user").isPay==true){
							this.show=true
						}else{
							this.showMd('请先到安全中心设置支付密码',()=>{})
						}
					}
				}else{
					this.msg("输入正确的金额，最少100","none")
				}
			},
			inputmoney(e){
				let data = e.detail.value
				data= data.replace(/[^\d.]/g, ""); //清除“数字”和“.”以外的字符   
				data= data.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的   
				data= data.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
				data= data.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); //只能输入两个小数   
				if (data.indexOf(".") < 0 && data != "") { //以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额  
					data = parseFloat(data);
				}
				setTimeout(() => {
					data=parseInt(data)
					if(isNaN(data)){
						data=''
					}
					this.money =data;
				},10)
			},
		}
	}
</script>

<style>
	.zwbtn {
		height: 66rpx;
		background-color: #F0812D;
		line-height: 66rpx;
		width: 400rpx;
		text-align: center;
		margin-top: 20rpx;
		border-radius: 20rpx;
		color: #FFFFFF;
	}
	.kk{
		height: 33rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 33rpx;
		color: #333333;
		opacity: 1;
		margin-top: 40rpx;
		padding-left: 40rpx;
	}
	.zzz{
		display: flex;
		align-items: center;
	}
	.je {
		height: 37px;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 37rpx;
		color: #333333;
		opacity: 1;
		margin-top: 30rpx;
	}

	.pad {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 42rpx;
		color: #333333;
		opacity: 1;
	}

	.warp {
		display: flex;
		/* align-items: center; */
		justify-content: center;
		height: 100%;
		padding-top: 200rpx;
	}

	.rect {
		/* width: 500rpx; */
		height: 390rpx;
		background-color: #fff;
		border-radius: 12rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 40rpx;
	}

	.b_num {
		font-size: 26rpx;
		font-family: PingFang SC;
		color: #999999;
		opacity: 1;
		margin-top: 20rpx;
	}

	.b_title {
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 30rpx;
		font-weight: 600;
		color: #333333;
		opacity: 1;
	}

	.bank {
		display: flex;
		padding: 20rpx 30rpx;
		justify-content: space-between;
		border-bottom: 1px solid #DFDFDF;
		border-top: 1px solid #DFDFDF;
	}

	.all {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #5B6A91;
		opacity: 1;
		margin-left: 20rpx;
	}

	.yv {
		display: flex;
		align-items: center;
		height: 100rpx;
		font-size: 26rpx;
	}

	.input-box {
		height: 100rpx;
		display: flex;
		align-items: center;
		border-bottom: 1px #DFDFDF solid;
		font-size: 50rpx;
		font-weight: bold;
	}

	.title {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		line-height: 37rpx;
		color: #333333;
		opacity: 1;
	}

	.btn {
		width: 690rpx;
		height: 70rpx;
		background: linear-gradient(180deg, #F09238 0%, #EC5F2A 100%);
		opacity: 1;
		border-radius: 35rpx;
		text-align: center;
		line-height: 70rpx;
		color: #FFFFFF;
		position: absolute;
		bottom: 60rpx;
	}

	.con {
		background-color: #F6F6F6;
		min-height: 100vh;
		padding-top: 100rpx;
	}

	.b_box {
		width: 750rpx;
		height: 750rpx;
		background: #FFFFFF;
		opacity: 1;
		border-radius: 12rpx 12rpx 0px 0px;
		position: fixed;
		bottom: 0;
		padding: 40rpx 30rpx;
		box-sizing: border-box;
	}
</style>
